<script lang="ts" setup>
	import { theme, useTheme as themetype } from "@/store/module/theme";
	import systemTheme from "@/utils/systemTheme";
	import { onMounted, ref } from "vue";
	// import modifyNavigationBarStyle from '@/utils/modifyNavigationBarStyle'

	interface ThemeItem {
		k : string;
		name : string;
		color : string;
		switchChecked : boolean;
	}

	const useTheme = themetype();

	const themeList = ref<ThemeItem[]>([]);

	const systemMsg = ref(false);

	const event = ref();

	const handleSwitch = (i : { k : string }) => {
		themeList.value.forEach((item) => {
			item.switchChecked = item.k === i.k ? true : false;
		});
		systemMsg.value = true;
		event.value = i.k;
	};

	const handleConfirm = (e : string) => {
		useTheme.setTheme(e);
		systemMsg.value = false;
	};

	const handleCancel = () => {
		themeList.value.forEach((item) => {
			item.switchChecked = uni.getStorageSync("theme") == item.k ? true : false;
		});
		systemMsg.value = false;
	};

	onMounted(() => {
		// // 修改导航条
		// void modifyNavigationBarStyle()
		const type = {
			light: "精灵白",
			dark: "恶魔黑",
			teal: "孔雀绿",
			violet: "紫罗兰",
			almond: "杏仁饼",
			chocolate: "巧克力",
			love: "薄暮",
			girl: "少女",
			blue: "拂晓蓝",
		};
		for (const k in systemTheme) {
			themeList.value.push({
				k,
				name: type[k],
				color: systemTheme[k]["baseColor"],
				switchChecked: uni.getStorageSync("theme") == k ? true : false,
			});
		}
	});
</script>

<template>
	<view :class="theme()" class="w-full min-h-[100vh]" :style="{background:'var(--Gradient-color)'}">
		<view v-for="i in themeList" :key="i.name"
			class="w-full h-auto flex justify-between items-center border-b border-[#f2f2f2] px-[20rpx] py-[20rpx]">
			<view class="w-[40rpx] h-[40rpx] rounded-full" :style="{
          backgroundColor: `${i.color}`,
          border: `${
            i.color == '#fff' ? '1rpx solid #d9d9d9' : '1rpx solid #fff'
          }`,
        }">
			</view>
			<view class="text-[14px] text-[#222]">
				{{ i.name }}
			</view>
			<nut-switch v-model="i.switchChecked" :active-color="i.color == '#fff' ? 'pink' : i.color"
				@click="handleSwitch(i)" />
		</view>
		<u-modal :show="systemMsg" :showCancelButton="true" @cancel="handleCancel" @confirm="handleConfirm(event)"
			confirmText="重启" cancelText="取消" title="系统提示" content="系统主题应用成功,是否重启生效"></u-modal>
	</view>
</template>